<template>
	<view>
		<cell label="自动更新"  value="开启" arrow  @onFormat="goAccount"></cell>
		<cell label="版本号18.8" value="580MB" @onFormat="upDate"></cell>
		<view class="update-container">
			<view v-if="!updating">
				<view class="update-desc">
					此更新推出「相機控制」的雨段式快門、「相片」的改進項目，自訂Safari「開始頁面」的新選項以及iPhone的其他功能，錯誤修正和保安更新項目。
				</view>
				<view class="update-btns">
					<view class="update-btn-main" @click="startUpdate">立即更新</view>
					<view class="update-btn-sub">稍后更新</view>
				</view>
			</view>
			<view v-else>
				<view class="update-progress-bar-wrap">
					<view class="update-progress-bar-bg">
						<view class="update-progress-bar" :style="{width: progress + '%'}"></view>
					</view>
					<view class="update-progress-time">还需约{{timeLeft}}分钟</view>
				</view>
				<view class="update-btns2">
					<view class="update-btn-main updating">
						<view class="loading"></view>
						<text style="margin-left: 12rpx;">正在更新</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Cell from '../component/cell.vue'

export default {
	components: {
		Cell
	},
	data() {
		return {
			updating: false,
			progress: 10,
			timeLeft: 3
		}
	},
	methods: {
		startUpdate() {
			this.updating = true
			// 这里可加定时器模拟进度
		},
		goAccount() {},
		upDate() {}
	}
}
</script>

<style scoped>
.update-container {
  min-height: 80vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 48rpx 32rpx 48rpx 32rpx;
}

.update-desc {
  color: #888;
  font-size: 26rpx;
  line-height: 1.7;
  margin-top: 16rpx;
  margin-bottom: auto;
  text-align: left;
  width: 100%;
}

.update-btns {
	position: fixed;
	bottom: 100rpx;
  width: 650rpx;
	left: 52rpx;

  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}
.update-btns2{
	width: 650rpx !important;
	text-align: center;
	position: fixed;
	bottom: 100rpx;
	left: 52rpx;
}
.update-btn-main {
  width: 100%;
  height: 88rpx;
  background: #000;
  color: #fff;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 36rpx;

}

.update-btn-main.updating {
  background: #fafafa;
  color: #111;
  border: none;
  position: relative;
}

.loading {
  width: 32rpx;
  height: 32rpx;
  border: 4rpx solid #bbb;
  border-top: 4rpx solid #111;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.update-btn-sub {
  color: #888;
  font-size: 26rpx;
  text-align: center;
}

.update-progress-bar-wrap {
	margin-left: -100rpx;
  width: 600rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-top: 20rpx;
  margin-bottom: 80rpx;
  position: relative;
  left: 52rpx;
}
.update-progress-bar-bg {
  flex: 1;
  height: 10rpx;
  background: #eee;
  border-radius: 8rpx;
  overflow: hidden;
  margin-right: 24rpx;
}
.update-progress-bar {
  height: 10rpx;
  background: #19c37c;
  border-radius: 8rpx;
  transition: width 0.4s;
}
.update-progress-time {
  color: #888;
  font-size: 26rpx;
  white-space: nowrap;
  min-width: 120rpx;
  text-align: right;
}
</style>

